<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1200">
    <el-form ref="formRef" :model="formData" label-width="120px" v-loading="formLoading">
      <el-divider content-position="left">
        <div class="formTitle">订单信息</div>
      </el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单编号：" prop="orderNum">
            {{ formData.orderNum }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单类型:" prop="orderContent">
            <dict-tag :type="DICT_TYPE.ORDER_CONTENT" :value="formData.orderContent" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单状态：" prop="orderStatus">
            <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="formData.orderStatus" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间:" prop="createTime">
            {{ formatDate1(formData.createTime) }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="关闭原因：" prop="closeReason" v-if="formData.orderStatus === 6">
            {{ formData.closeReason }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">
        <div class="formTitle">客户信息</div>
      </el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户名称：" prop="username">
            {{ formData.username }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司名称：" prop="enterpriseName">
            {{ formData.enterpriseName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号：" prop="phone">
            {{ formData.phone }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">
        <div class="formTitle">需求描述</div>
      </el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目名称：" prop="projectName">
            {{ formData.projectName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="需求简述：" prop="demand">
            {{ formData.demand }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="交付物：" prop="deliverables">
            {{ formData.deliverables }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望交付时间：" prop="expectedDate">
            {{ formatDate2(formData.expectedDate) }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">
        <div class="formTitle">报价信息</div>
      </el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="报价金额：" prop="quote">
            <el-link :href="formData.quoteFile" target="_blank" style="color: #409eff;" v-if="formData.quoteFile">
              {{ formData.quote === null ? '-' : formData.quote + '元 (查看报价单)' }}
            </el-link>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付方式：" prop="payMethod">
            <dict-tag :type="DICT_TYPE.PAY_METHOD" :value="formData.payMethod" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="报价时间：" prop="quoteTime">
            {{ formatDate1(formData.quoteTime) }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">
        <div class="formTitle">订单支付</div>
      </el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单金额：" prop="quote">
            {{ formData.quote }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回款金额：" prop="totalRepayAmount">
            {{ formData.totalRepayAmount }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="待回款金额：" prop="waitRepayAmount">
            {{ formData.waitRepayAmount }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="支付记录：" prop="systemFinancePaymentRecordsList">
            <el-table :data="formData.systemFinancePaymentRecordsList">
              <el-table-column prop="repayCount" label="回款次数" width="100" align="center" />
              <el-table-column prop="repayAmount" label="回款金额" width="150" align="center" />
              <el-table-column prop="operateTime" label="回款时间" width="180" align="center" :formatter="dateFormatter" />
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate1, formatDate2, dateFormatter } from '@/utils/formatTime'
import * as OrderApi from '@/api/order'

defineOptions({ name: 'SystemRoleForm' })


const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  orderNum: null,
  orderContent: '',
  orderStatus: null,
  createTime: '',
  username: '',
  enterpriseName: '',
  phone: '',
  projectName: '',
  demand: '',
  deliverables: '',
  expectedDate: '',
  quote: '',
  quoteFile: '',
  payMethod: '',
  quoteTime: '',
  totalRepayAmount: '',
  waitRepayAmount: '',
  closeReason: '',
  systemFinancePaymentRecordsList: []
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (id) => {
  dialogVisible.value = true
  dialogTitle.value = '订单详情'
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      let data = await OrderApi.getOrderId(id)
      if (data.quoteFile) {
        data.quoteFile = JSON.parse(data.quoteFile)[0].url
      } else {
        data.quoteFile = ''
      }
      formData.value = data
    } finally {
      formLoading.value = false
    }
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    orderNum: null,
    orderContent: '',
    orderStatus: null,
    createTime: '',
    username: '',
    enterpriseName: '',
    phone: '',
    projectName: '',
    demand: '',
    deliverables: '',
    expectedDate: '',
    quote: '',
    quoteFile: '',
    payMethod: '',
    quoteTime: '',
    totalRepayAmount: '',
    waitRepayAmount: '',
    closeReason: '',
    systemFinancePaymentRecordsList: []
  }
  formRef.value?.resetFields()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style scoped>
.formTitle {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
}

.el-form-item {
  margin-bottom: 10px;
}
</style>
